<template>
    	<div class="table-wrapped">
		<div class="table-top">
			<div class="table-header">
				<div></div>
				<div class="upload-wrapped">
					<el-upload v-model:file-list="fileLists" class="upload-demo"
					:action="fileUrl" multiple :limit='3' :on-exceed='handleExceed'
						:on-success="handleSuccess" :show-file-list='false'>
						<el-button type="primary">上传文件</el-button>
					</el-upload>
				</div>
			</div>
			<div class="table-content">
				<el-table :data='tableData' style="width: 100%;">
					<el-table-column type="index" width="50"></el-table-column>
					<el-table-column prop="file_name" label="文件名" />
					<el-table-column  prop="file_size" label="文件大小" >
						<template #default="{row}">
							<div v-if="row.file_size">{{row.file_size?.slice(0,2)}}KB</div>
						</template>
					</el-table-column>
					<el-table-column prop="upload_person" label="上传者" />
					<el-table-column prop="download_number" label="下载次数" />
					<el-table-column prop="upload_time" label="上传时间" width="200">
						<template #default="{row}">
							<div v-if="row.upload_time">{{row.upload_time?.slice(0,10)}}</div>
						</template>
					</el-table-column>

					<el-table-column label="操作" width="200" fixed="right">
						<template #default="{row}">
							<div>
								<el-button type="success">
									<template #default>
										<a :href="row.file_url"
											@click="changeClick(row.download_number,row.id)">下载文件</a>
									</template>
								</el-button>
								<el-button type="danger" @click="deleteFiles(row)">删除</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {fileList,bindFileAndUser,updateDownload,deleteFile} from '@/api/file/index'
import type {UploadProps} from 'element-plus'
import {ElMessage} from 'element-plus'

const fileLists = ref()
const fileUrl = `${import.meta.env.VITE_API_BASEURL}/file/uploadFile`
onMounted(()=>{
    getData()
})
const getData = async()=>{
    const res = await fileList()
    if(res.status == 0){
       tableData.value =  res.data
    }
}
	// 文件数量限制回调
const handleExceed: UploadProps['onExceed'] = () => {
	ElMessage.warning(
		'最多上传三个文件！'
	)
}
const handleSuccess = (response:any)=>{
            let data: any = {
                 name: localStorage.getItem('name') as any,
                url: response.url
            }
    		if (response.status == 0) {
			(async () => {
				await bindFileAndUser(data)
			})()
			ElMessage({
				message: '上传文件成功',
				type: 'success',
			})
			getData()
		} else {
			ElMessage.error('上传文件失败，请检查网络问题！')
		}
}

const tableData = ref([])

//下载文件
const changeClick = async(download_number:any,id:number)=>{
    let data:any = {
        download_number,
        id,
    }
    const res =  await updateDownload(data)
    if(res.status == 0){
        ElMessage({
            type:'success',
            message:'下载成功'
        })
    }
}
//删除
const deleteFiles = async(row:any)=>{
    let data:any = {
        id:row.id,
        file_name:row.file_name
    }
    const res:any = await deleteFile(data)
    if(res.status == 0){
         ElMessage({
            type:'success',
            message:'删除成功'
        })
        getData()
    }
}
</script>
<style scoped>
@import url('@/assets//css/common.scss');
</style>
<style lang="scss" scoped>
	:deep(.el-table .cell) {
		font-weight: 400;
	}
	
	a {
		color:#fff;
		display: block;
		text-decoration: none;
	}
</style>